<template>
  <transition name="actionsheet-float">
    <div
      class="mint-actionsheet logout-box"
      v-show="modal_toggle"
      style="z-index: 2013"
    >
      <ul class="mint-actionsheet-list" style="margin-bottom: 5px">
        <li class="mint-actionsheet-listitem">{{ text }}</li>
        <li
          class="mint-actionsheet-listitem"
          @click="$emit('loginOutWrapHandler', false)"
        >
          {{ title }}
        </li>
      </ul>
      <a
        class="mint-actionsheet-button"
        @click="$emit('cancleloginOutWrapHandler', false)"
        >取消</a
      >
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
    },
    text: {
      type: String,
    },
    modal_toggle: {
      type: Boolean,
      default: false,
    },

  },
  mounted() {
    //   console.log(this.login_out_wrap);
  },
};
</script>
<style scoped>
.mint-actionsheet {
  position: fixed;
  background: #e0e0e0;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}

.mint-actionsheet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mint-actionsheet-listitem {
  border-bottom: 1px solid #e0e0e0;
}

.mint-actionsheet-button,
.mint-actionsheet-listitem {
  display: block;
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 18px;
  color: #333;
  background-color: #fff;
}

.mint-actionsheet-button:active,
.mint-actionsheet-listitem:active {
  background-color: #f0f0f0;
}

.actionsheet-float-enter,
.actionsheet-float-leave-active {
  -webkit-transform: translate3d(-50%, 100%, 0);
  transform: translate3d(-50%, 100%, 0);
}

.v-modal-enter {
  -webkit-animation: v-modal-in 0.2s ease;
  animation: v-modal-in 0.2s ease;
}

.v-modal-leave {
  -webkit-animation: v-modal-out 0.2s ease forwards;
  animation: v-modal-out 0.2s ease forwards;
}

@-webkit-keyframes v-modal-in {
  0% {
    opacity: 0;
  }
}

@keyframes v-modal-in {
  0% {
    opacity: 0;
  }
}

@-webkit-keyframes v-modal-out {
  to {
    opacity: 0;
  }
}

@keyframes v-modal-out {
  to {
    opacity: 0;
  }
}


.system-set-view .localstore-box .mint-actionsheet-listitem,
.system-set-view .logout-box .mint-actionsheet-listitem {
  position: relative;
  border-bottom: 0;
  color: #191a1b;
}

.system-set-view .localstore-box .mint-actionsheet-listitem:first-child,
.system-set-view .logout-box .mint-actionsheet-listitem:first-child {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #bdc0c5;
}

.system-set-view .localstore-box .mint-actionsheet-listitem:last-child,
.system-set-view .logout-box .mint-actionsheet-listitem:last-child {
  color: #e54847;
}

.system-set-view .localstore-box .mint-actionsheet-listitem:after,
.system-set-view .logout-box .mint-actionsheet-listitem:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>